<template>
  <div>
    <h2>show和if</h2>
    <!-- ● v-show
  ○ 通过 display: none 样式来让元素隐藏
  ○ 频繁的切换元素的显示和隐藏，使用 v-show 更好 -->

    <!-- ● v-if
  ○ 通过移除掉元素，从而让元素隐藏
  ○ 配合v-else-if 和 v-else 进行多条件判断 -->
    <p v-show="flag">你是猪</p>
    <p v-if="flag">你确实是猪 哈哈哈</p>
    <p>我是后来的 我什么都不知道</p>
  </div>
</template>

<script>
export default {
  //这里放vue相关代码
  data() {
    return {
      flag: false,
    };
  },
};
</script>

<style >
h2 {
  color: skyblue;
}
</style>